<template>
  <!-- 对于表单元素来说，要实现提交数据的功能，有两个地方可以添加事件：
-  直接对 提交 按钮 添加
  -  给form添加submit-->
  <form @submit.prevent="edit()">
    <button @click.prevent="$router.push('/hero')" class="btn btn-primary">返回</button>
    <legend>编辑英雄{{this.$route.params.id}}</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model.trim="hero.heroName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender" /> 男
        <input type="radio" value="女" v-model="hero.gender" /> 女
      </div>
    </div>
    <!-- 对于form中的button，它有提交表单的默认动作，这里要阻止 -->
    <button @click.prevent="hSave" class="btn btn-primary">保存</button>
  </form>
</template>

<script>
// import axios from "axios";
export default {
  name: "HeroAdd",
  data() {
    return {
      // 定义的数据项是一个对象
      hero: {
        heroName: "",
        gender: "男"
      }
    };
  },
  // 在组件创建完时，根据id获取这个英雄的详情并显示出来
  created() {
    this.getHero();
  },
  methods: {
    // 获取初始值
    getHero() {
      // 根据id获取这个英雄的详情并显示出来
      this.$http({
        method: "GET",
        url: "heroes/" + this.$route.params.id
      })
        .then(res => {
          //   console.log(res);
          // 把取回的数据保存在数据项 hero中
          this.hero.heroName = res.data.heroName;
          this.hero.gender = res.data.gender;

          // 页面上，立即就显示了数据出来 ？
          // 由于我们采用v-model双向绑定，所以一旦数据变化了，视图会跟着变化
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 提交添加的信息
    hSave() {
      // 1. 获取用户的输入
      // 2. 判断是否为空
      //   console.log(this.hero);
      if (this.hero.heroName == "") {
        return;
      }
      // 3. ajax提交
      this.$http({
        method: "PUT", //完成修改
        url: "heroes/" + this.$route.params.id,
        // 根据RESTFul接口要求传入参数
        data: {
          heroName: this.hero.heroName,
          gender: this.hero.gender,
          cTime: new Date()
        }
      })
        //此处 res 设置为 () 是为了不显示修改的数据
        .then(() => {
          //   console.log(res);
          // alert('修改成功')
          // 实现：修改成功之后，自动跳回到英雄列表页。
          // 编程式导航 ： 通过代码的方式来进行页面的跳转
          this.$router.push("/hero");
        })
        .catch(err => {
          console.log(err);
          alert("修改失败");
        });
    }
  }
};
</script>

<style>
</style>